<template>
  <div style="padding: 10px;">
    <Row label="字段标题" :required="true">
      <a-input v-model="fieldConfig.label"/>
    </Row>

    <Row label="字段名称" :required="true">
      <a-input v-model="fieldConfig.fieldName"/>
    </Row>

    <Row label="输入提示">
      <a-input v-model="fieldConfig.placeholder"/>
    </Row>

    <Row label="显示格式">
      <a-select v-model="fieldConfig.format">
        <a-select-option data-role="ignore-select-field" value="YYYY-MM-DD">默认格式（如2090-06-01）</a-select-option>
        <a-select-option data-role="ignore-select-field" value="YYYY年MM月DD日">数字年月日（如2090年06月01日）</a-select-option>
        <a-select-option data-role="ignore-select-field" value="YYYY/MM/DD">数字年月日（如2090/06/01/）</a-select-option>
      </a-select>
    </Row>

    <FieldValueFormulaGroups :fieldConfig="fieldConfig" :formDefinition="formDefinition"/>
  </div>
</template>

<script>
import {createProps} from '@/utils';
import { createField, createFormDefinition } from '@/components/hhd/design/FormDesigner/types'
import Row from '@/components/hhd/design/FormDesigner/base/Row.vue';
import FieldValueFormulaGroups
  from '@comp/hhd/design/FormDesigner/field/comps/form/FieldValueFormulaGroups/FieldValueFormulaGroups.vue'

function createDateField() {
  let res = createField();
  res.component = 'date'
  return res;
}

export default {
  name: "DateConfig",
  components: { FieldValueFormulaGroups, Row},
  props: {
    formDefinition: createProps(Object, createFormDefinition),
    fieldConfig: createProps(Object, createDateField()),
  }
}
</script>

<style scoped>

</style>
